<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>hash</title>
</head>
<body>
<div class="router-link">
    <span class="" onClick="routeTo('home')">首页</span>
    <span class="" onClick="routeTo('list')">列表</span>
    <span class="" onClick="routeTo('about')">关于</span>
</div>
<div class="router-view" id="app">

</div>

<script >

document.addEventListener('DOMContentLoaded', function () {
    console.log(location.hash);
})

window.addEventListener('hashchange', function (event) {
    const { newURL, oldURL } = event
    console.log('listen', newURL, oldURL, event)
    const newHash = newURL.split('#').pop()
    document.getElementById('app').innerHTML = newHash
})

function routeTo (targetName) {
    console.log('click', targetName)
    location.hash = targetName
}

// http-server 
// http://127.0.0.1:8081/hash.html#index
// 1. 切换导航标签
// 2. 点击前进和后退



</script>



</body>
</html>